<template>
  <el-dialog
      v-model="scmsEditWinDialogVisible"
      title="编辑点检保养计划"
      width="80%"
      @close="handleClose"
      draggable
      center
  >
    <template #default>
      <el-form :model="editScms">
        <el-row>
          <el-form-item label="计划编码" style="margin-right: 100px">
            <el-input v-model="editScms.scmsEncode" style="width: 200px"/>
          </el-form-item>
          <el-form-item label="计划名称">
            <el-input v-model="editScms.scmsName" style="width: 200px"/>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="计划类型" style="margin-right: 100px">
            <el-select placeholder="请选择计划类型" style="width:150px" v-model="editScms.scmsType">
              <el-option label="设备点检计划" :value="1"/>
              <el-option label="设备保养计划" :value="2"/>
            </el-select>
          </el-form-item>
          <el-form-item label="频率">
            <el-input-number v-model="editScms.scmsFnum" :min="1"/>
            <el-select placeholder="请选择频率" v-model="editScms.scmsFunit" style="width:150px">
              <el-option label="小时" value="小时"/>
              <el-option label="天" value="天"/>
              <el-option label="周" value="周"/>
              <el-option label="月" value="月"/>
              <el-option label="季" value="季"/>
              <el-option label="年" value="年"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="开始日期">
            <el-date-picker
                v-model="editScms.scmsStart"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker
                v-model="editScms.scmsEnd"
                value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select placeholder="请选择状态" style="width:150px" v-model="editScms.scmsStatus">
              <el-option label="草稿" :value="1"/>
              <el-option label="已确认" :value="2"/>
              <el-option label="审批中" :value="3"/>
              <el-option label="已审批" :value="4"/>
              <el-option label="已完成" :value="5"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="editScms.scmsRemark"/>
        </el-form-item>
        <el-tabs type="border-card">
          <el-tab-pane label="设备清单">
            <!-- 工具栏 -->
            <el-row>
              <el-col :span="24">
                <el-button type="primary" @click="toAdd">新增</el-button>
                <el-button type="primary" @click="toDelete">删除</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" style="margin-top: 10px">
                <el-table
                    :data="ledgers"
                    stripe
                ><!-- stripe可以为表格添加斑马纹样式，默认false -->
                  <el-table-column type="selection" width="55"/>
                  <el-table-column prop="ledgerEncode" label="设备编码" width="150" align="center"/>
                  <el-table-column prop="ledgerName" label="设备名称" width="150" align="center"/>
                  <el-table-column prop="ledgerBrand" label="品牌" width="150" align="center"/>
                  <el-table-column prop="ledgerModel" label="规格型号" width="150" align="center"/>
                  <el-table-column prop="ledgerWorkshop" label="所属车间" width="150" align="center">
                    <template #default="scope">
                      <el-tag type="primary" v-if="scope.row.ledgerWorkshop == 0">家用车间</el-tag>
                      <el-tag type="success" v-else-if="scope.row.ledgerWorkshop == 1">军用车间</el-tag>
                      <el-tag type="info" v-else>企业车间</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="ledgerStatus" label="设备状态" width="100" align="center">
                    <template #default="scope">
                      <el-tag type="primary" v-if="scope.row.ledgerStatus == 1">开机</el-tag>
                      <el-tag type="danger" v-else>停机</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="创建时间" width="200" align="center"/>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="保养项目">
            <!-- 工具栏 -->
            <el-row>
              <el-col :span="24">
                <el-button type="primary" @click="toAdd2">新增</el-button>
                <el-button type="primary" @click="toDelete2">删除</el-button>
              </el-col>
            </el-row>
            <!-- 数据表 -->
            <el-row style="margin-top: 10px">
              <el-col :span="24">
                <el-table
                    :data="scmis"
                    border
                    stripe
                ><!-- stripe可以为表格添加斑马纹样式，默认false -->
                  <el-table-column type="selection" width="55"/>
                  <el-table-column prop="scmiEncode" label="项目编码" width="150" align="center"/>
                  <el-table-column prop="scmiName" label="项目名称" width="150" align="center"/>
                  <el-table-column prop="scmiType" label="项目类型" width="150" align="center">
                    <template #default="scope">
                      <el-tag v-if="scope.row.scmiType === 1">设备点检</el-tag>
                      <el-tag v-else>设备保养</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="scmiContent" label="项目内容" width="150" align="center"/>
                  <el-table-column prop="scmiStandard" label="标准" width="150" align="center"/>
                  <el-table-column prop="scmiStatus" label="是否启用" width="150" align="center">
                    <template #default="scope">
                      <el-tag type="primary" v-if="scope.row.scmiStatus === 1">是</el-tag>
                      <el-tag type="danger" v-else>否</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="scmiRemark" label="备注" width="200" align="center"/>
                </el-table>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="editScmsSubmit">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 新增点检保养计划弹窗 -->
  <maintain-plan-add2 :flag="addScms" @cancelAdd="cancelAdd" @addComplete="loadLedgers"/>
</template>
<script setup>
import {ref, watch} from "vue";
import {ElMessage} from "element-plus";
import scmsRequest from "@/api/scms.js";
import ledgerRequest from "@/api/ledger.js";
import scmiRequest from "@/api/scmi.js";
import MaintainPlanAdd2 from "@/views/device/maintainPlan-add2.vue";

const props = defineProps(['scmsId']);
const emits = defineEmits(['cancelEdit','editComplete' ])
let scmsEditWinDialogVisible = ref(false)
let editScms = ref({})
// 封装查询条件
let ledgerQuery = ref({});
// 封装查询的结果集合
let ledgers = ref([]);
// 封装查询条件
let scmiQuery = ref({});
// 封装查询的结果集合
let scmis = ref([]);
// 新增的addScms
let addScms = ref(-1);


function toAdd(){
  addScms.value = 1;
}
function cancelAdd(){
  addScms.value = -1;
}
function cancel() {
  emits("cancelEdit");
  scmsEditWinDialogVisible.value = false;
}

function handleClose() {
  emits("cancelEdit");
}

function loadScmis(){
  scmiRequest.loadScmis(scmiQuery.value,res=>{
    scmis.value = res.data;
  })
}


function loadLedgers(){
  ledgerRequest.loadLedgers(ledgerQuery.value,res=>{
    ledgers.value = res.data;
  })
}

function loadScmsById() {
  scmsRequest.selectById(props.scmsId, res => {
    if (res.data) {
      editScms.value = res.data;
      scmsEditWinDialogVisible.value = true;
    }
  })
}

function editScmsSubmit() {
  scmsRequest.update(editScms.value, res => {
    if (res.code == 1) {
      ElMessage({
        type: "success",
        message: "编辑成功"
      });
      scmsEditWinDialogVisible.value = false;
      // 触发编辑完成的事件
      emits('editComplete');
    } else {
      ElMessage({
        type: "warning",
        message: "编辑失败"
      });
    }
  })
}

watch(() => props.scmsId, () => {
  loadScmsById();
  loadLedgers();
  loadScmis()
});
</script>
<style scoped>

</style>